import React from 'react';
import CateItem from './CateItem'
import './cate.css'
import { getFruitsMenu, getOtherFruits } from '../../api/api'

class NewsList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tabs:[
                {tabName:"进口水果",id:1},
                {tabName:"其他水果",id:2},
                {tabName:"精选肉类",id:3},
                {tabName:"禽类蛋品",id:4},
                {tabName:"海鲜水产",id:5},
                {tabName:"即烹美食",id:6},
                {tabName:"乳品糕点",id:7},
                {tabName:"新鲜蔬菜",id:8},
                {tabName:"方便速食",id:9},
                {tabName:"饮料酒水",id:10},
            ],
            currentIndex:1,
            importFruits:[],
            otherFruits:[]
        };
    }    
    componentWillMount() {
        getFruitsMenu().then(res=>{
            this.setState({
                importFruits:[...res.data.message]
            })
        });
        getOtherFruits().then(res=>{
            this.setState({
                otherFruits:[...res.data.message]
            })
        });
    }
    tabChoiced=(id)=>{
        //tab切换到方法
        this.setState({
            currentIndex:id
        });
    }

    
    renderMenu(){
        if(this.state.importFruits.length>0){
            return this.state.importFruits.map((item,index)=>{
                return (
                    <CateItem key={index}
                     pic={item.category_thumb}
                     title={item.category_name}/>
                )
            })
        }
    }
    renderOtherMenu(){
        if(this.state.otherFruits.length>0){
            return this.state.otherFruits.map((item,index)=>{
                return (
                    <CateItem key={index}
                     pic={item.category_thumb}
                     title={item.category_name}/>
                )
            })
        }
    }
    render(){
        var _this=this;
        var isBox1Show=this.state.currentIndex===1 ? 'block' : 'none';
        var isBox2Show=this.state.currentIndex===2 ? 'block' : 'none';
        var isBox3Show=this.state.currentIndex===3 ? 'block' : 'none';
        var isBox4Show=this.state.currentIndex===4 ? 'block' : 'none';
        var isBox5Show=this.state.currentIndex===5 ? 'block' : 'none';
        var isBox6Show=this.state.currentIndex===6 ? 'block' : 'none';
        var isBox7Show=this.state.currentIndex===7 ? 'block' : 'none';
        var isBox8Show=this.state.currentIndex===8 ? 'block' : 'none';
        var isBox9Show=this.state.currentIndex===9 ? 'block' : 'none';
        var isBox10Show=this.state.currentIndex===10 ? 'block' : 'none';

          var tabList= this.state.tabs.map(function(res,index) {
              // 遍历标签页，如果标签的id等于tabid，那么该标签就加多一个active的className
            var tabStyle=res.id===this.state.currentIndex ? 'subctrl actived' : 'subctrl';

            return    <li key={index} onClick={this.tabChoiced.bind(_this,res.id)} className={tabStyle}>{res.tabName}</li>

        }.bind(_this));
        return (
            <div className="cate-container">
                <ul className="sub-nav-wrap">
                    {tabList}
                </ul>
                <div className="goods-list">
                    <div style={{"display":isBox1Show}} >
                        {this.renderMenu()}
                    </div>
                    <div style={{"display":isBox2Show}}>
                    {this.renderOtherMenu()}
                    </div>
                    <div style={{"display":isBox3Show}}>
                        <h1 className='tips' style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}}>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox4Show}} >
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox5Show}}>
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox6Show}}>
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox7Show}} >
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox8Show}}>
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox9Show}}>
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                    <div style={{"display":isBox10Show}} >
                        <h1 style={{'color':'#0eb27b','marginTop':'80px','fontSize':'20px'}} className='tips'>敬请期待...</h1>
                    </div>
                </div>
            </div>
        )
    }
}

export default NewsList;